<%@ page language="java"  pageEncoding="UTF-8"%>

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="div1"   style="height:400px;width: 500px;"></div>
    <div id="div2"   style="height:400px;width: 500px;"></div>
    <!-- ECharts单文件引入 -->	
    <script src="../js/echarts.js"></script>
    <script src="../js/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
            	 echarts: '../js'
            }
        });
        
        // 使用
        require(
            [
              'echarts',
              'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
              'echarts/chart/pie',//  饼状图  pie
              'echarts/chart/funnel',//漏斗
              'echarts/chart/line',
/*               'echarts/chart/map',//地图
              'echarts/chart/heatmap', //热力
              'echarts/chart/gauge',//仪表
              'echarts/chart/tree',
              'echarts/chart/line', */
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('div1')); 
                  var myChart2=ec.init(document.getElementById('div2'));
                //饼图
               data = {name:['无数据'],value:[0]};
               option = {
                	    title : {
                	        text: '物品管理',
                	        subtext: '纯属虚构',
                	        x:'center'
                	    },
                	    tooltip : {
                	        trigger: 'item',
                	        formatter: "{a} <br/>{b} : {c} ({d}%)"
                	    },
                	    legend: {
                	        orient : 'vertical',
                	        x : 'left',   //在那一边
                	        data:data.name
                	    },
                	            
                	    toolbox: {//导航栏
                	        show : true,
                	        feature : {
                	            mark : {show: true},//辅助线
                	            dataView : {show: true, readOnly: false}, //清除
                	      
                	            magicType : {//数据视图
                	                show: true, 
                	                type: ['pie', 'funnel'],
                	                option: {
                	                    funnel: {
                	                        x: '25%',
                	                        width: '50%',
                	                        funnelAlign: 'left',
                	                        max: 1548
                	                    }
                	                }
                	            },
                	            restore : {show: true},  //重载
                	            saveAsImage : {show: true}//保存图片
                	        }
                	    },
                	    calculable : false,//是否可以移动添加
                	    series : [
                	        {
                	            name:'物品数量',
                	            type:'pie',
                	            radius : '55%',
                	            center: ['50%', '60%'],
                	            data: data.value
                	        }
                	        
                	    ],
                	   
                	};
               option2 = {
            		    title: {
            		        text: '未来一周气温变化',
            		        subtext: '纯属虚构'
            		    },
            		    tooltip: {
            		        trigger: 'axis'
            		    },
            		    legend: {
            		        data:['最高气温','最低气温']
            		    },
            		    toolbox: {
            		        show: true,
            		        feature: {
            		            dataZoom: {
            		                yAxisIndex: 'none'
            		            },
            		            dataView: {readOnly: false},
            		            magicType: {type: ['line', 'bar']},
            		            restore: {},
            		            saveAsImage: {}
            		        }
            		    },
            		    xAxis:  {
            		        type: 'category',
            		        boundaryGap: false,
            		        data: ['周一','周二','周三','周四','周五','周六','周日']
            		    },
            		    yAxis: {
            		        type: 'value',
            		        axisLabel: {
            		            formatter: '{value} °C'
            		        }
            		    },
            		    series: [
            		        {
            		            name:'最高气温',
            		            type:'line',
            		            data:[11, 11, 15, 13, 12, 13, 10],
            		            markPoint: {
            		                data: [
            		                    {type: 'max', name: '最大值'},
            		                    {type: 'min', name: '最小值'}
            		                ]
            		            },
            		            markLine: {
            		                data: [
            		                    {type: 'average', name: '平均值'}
            		                ]
            		            }
            		        },
            		        {
            		            name:'最低气温',
            		            type:'line',
            		            data:[1, -2, 2, 5, 3, 2, 0],
            		            markPoint: {
            		                data: [
            		                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
            		                ]
            		            },
            		            markLine: {
            		                data: [
            		                    {type: 'average', name: '平均值'},
            		                    [{
            		                        symbol: 'none',
            		                        x: '90%',
            		                        yAxis: 'max'
            		                    }, {
            		                        symbol: 'circle',
            		                        label: {
            		                            normal: {
            		                                position: 'start',
            		                                formatter: '最大值'
            		                            }
            		                        },
            		                        type: 'max',
            		                        name: '最高点'
            		                    }]
            		                ]
            		            }
            		        }
            		    ]
            		};

    
                	               
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                myChart2.setOption(option2);
             //	myChart.hideLoading();
            //setInterval(getChartData,2000);
            myChart.on('dblclick', function (params) {
            	
            	
            	
    console.log(params);
});
        
        getChartData();
                function   getChartData(){
                     //通过ajax获取数据
                    $.post("echarts",function(data){
                    	 var result=$.parseJSON(data);
                    	 var res = [];//value 数组
        				var name=[];  //name  数组
                    	 $.each(result,function(){
                    		 res.push({
                                 name: this.officeName,
                                 value: this.officeCount
                                 });
                    		 name.push(this.officeName);
                    	 });
                    	 //添加数据
                    	    myChart.setOption({
                    	    	//对数据进行筛选
                    	 
                           	 legend: {
                        	        data: name
                        	    },
                           	 series : [
                              	        {
                              	            data: res.sort(function (a, b) { return a.value - b.value;}),
                              	            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
                              	        }
                              	        
                              	    ] 
                           	 
                            });
                    	 
                    	/* var value=Math.round(Math.random()*50);
                    	  myChart.addData([
                                           [
                                               0,        // 系列索引
                                               {         // 新增数据
                                                   name: '随机数据'+value,
                                                   value: value
                                               },
                                               false,     // 新增数据是否从队列头部插入
                                               false,     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                                              '随机数据'+value,  //
                                           ]
                                        
                                        ]);  */
            	  
            	   
               });
                
           }
                   //
            }
        );
    </script>
</body>
